import { IconFont } from '@nutui/icons-react-taro'
import { Col, Grid, Row, SearchBar } from '@nutui/nutui-react-taro'
import { ScrollView, Text, View } from '@tarojs/components'
import { useMemo } from 'react'
import { useRequest } from 'taro-hooks'
import Button from '../../components/button'
import Card from '../../components/card'
import ImageContent from '../../components/image-content'
import Layout from '../../components/layout'
import ProductInfoCard from '../../components/product-info-card'
import SectionHeader from '../../components/section-header'
import { useNavigation } from '../../hooks/useNavigation'
import { getCaseList } from '../../services/home'
import { getProductList } from '../../services/product'
import './index.less'

const Home = () => {
  const { navigateTo } = useNavigation()
  const { data: productList, loading } = useRequest(getProductList)
  const { data: caseList, loading: caseListLoading } = useRequest(getCaseList, {
    defaultParams: [{ page: 1, pageSize: 10 }],
  })
  const caseListData = caseList?.cases

  // 服务分类数据
  const serviceCategories = useMemo(() => {
    return (
      productList?.products?.map((item) => ({
        icon: <IconFont fontClassName='iconfont' classPrefix='icon' name={item.icon || 'yanfang'} size={20} />,
        title: item.productName.slice(0, 4),
        id: item.id,
      })) || []
    )
  }, [productList])

  const featuredCases = useMemo(() => {
    return (
      caseListData?.slice(0, 2).map((item) => ({
        id: item.product.id,
        title: item.title,
        subtitle: item.product.name,
        image: item.image[0] || '',
      })) || []
    )
  }, [caseListData])

  // 服务保障数据
  const serviceGuarantees = [
    {
      icon: (
        <IconFont
          fontClassName='iconfont'
          classPrefix='icon'
          name='baohuhaoma'
          size={40}
          style={{ color: '#52c41a' }}
        />
      ),
      title: '官方认证',
      desc: '平台严格筛选',
    },
    {
      icon: (
        <IconFont
          fontClassName='iconfont'
          classPrefix='icon'
          name='zhifudingjin'
          size={40}
          style={{ color: '#52c41a' }}
        />
      ),
      title: '价格透明',
      desc: '无隐形增项',
    },
    {
      icon: (
        <IconFont
          fontClassName='iconfont'
          classPrefix='icon'
          name='anquanbaozhang'
          size={40}
          style={{ color: '#52c41a' }}
        />
      ),
      title: '工艺保障',
      desc: '德系施工标准',
    },
  ]

  const gotoProjectDetails = (id: string) => {
    navigateTo({
      url: '/pages/project-details/index',
      params: { id: id },
    })
  }

  return (
    <Layout title='袋鼠换新' fullLoading={loading || caseListLoading} showBack={false}>
      <ScrollView scrollY className='home-container'>
        <SearchBar
          placeholder='搜索服务、案例或设计师'
          shape='round'
          onFocus={() => navigateTo('/pages/search/index')}
          className='mb-16'
        />

        <View>
          <Row gutter={10} className='pl-12 pr-12 mb-16'>
            <Col span={12}>
              <ImageContent
                width='100%'
                onClick={() => navigateTo('/pages/quick-appointment/index')}
                height={100}
                title='一键预约'
                description='预约服务，轻松搞定'
                src='https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center'
              />
            </Col>
            <Col span={12}>
              <ImageContent
                width='100%'
                onClick={() => navigateTo('/pages/fee-estimation/index')}
                height={100}
                title='透明报价'
                description='预算清晰无隐形消费'
                src='https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center'
              />
            </Col>
          </Row>

          {/* 服务分类网格 */}
          <Grid columns={4} gap={10} className='service-section mb-16'>
            {serviceCategories?.slice(0, 7)?.map((item, index) => (
              <Grid.Item key={index} text={item.title} onClick={() => gotoProjectDetails(item.id + '')}>
                {item.icon}
              </Grid.Item>
            ))}
            <Grid.Item text='全部服务'>
              <IconFont fontClassName='iconfont' classPrefix='icon' name='qita' size={20} />
            </Grid.Item>
          </Grid>

          {/* 精选案例 */}
          <View className='pl-12 pr-12 mb-16'>
            <SectionHeader title='精选案例' showViewAll onViewAllClick={() => console.log('查看全部案例')} />
            <Row gutter='10' style={{ gap: 10 }}>
              {featuredCases?.map((caseItem) => (
                <Col span={12} key={caseItem.id} onClick={() => gotoProjectDetails(caseItem.id + '')}>
                  <ProductInfoCard
                    key={caseItem.id}
                    image={caseItem.image}
                    title={caseItem.title}
                    subtitle={caseItem.subtitle}
                  />
                </Col>
              ))}
            </Row>
          </View>

          {/* 服务保障 */}
          <View className='pl-12 pr-12'>
            <SectionHeader title='服务保障' showViewAll={false} />
          </View>
          <Grid columns={3} gap={8}>
            {serviceGuarantees.map((item, index) => (
              <Grid.Item key={index}>
                <View className='guarantee-item'>
                  <View className='guarantee-icon'>{item.icon}</View>
                  <View className='guarantee-info'>
                    <Text className='guarantee-title'>{item.title}</Text>
                    <Text className='guarantee-desc'>{item.desc}</Text>
                  </View>
                </View>
              </Grid.Item>
            ))}
          </Grid>
          {/* CTA区域 */}
          <View className='pl-12 pr-12 mt-16 mb-16'>
            <Card className='cta-section'>
              <View className='cta-content'>
                <Text className='cta-title'>专属方案，限时免费领</Text>
                <Text className='cta-subtitle'>AI诊断 · 智能报价 · 在线支付</Text>
              </View>
              <Button>立即获取</Button>
            </Card>
          </View>
        </View>
      </ScrollView>
    </Layout>
  )
}

export default Home
